<template>
  <div class="mbti-test-container">
    <div class="test-header">
      <h1>MBTI人格测试</h1>
      <p class="test-description">回答以下问题，了解你的MBTI人格类型</p>
      <div class="test-progress">
        <div class="progress-bar">
          <div class="progress-fill" :style="{ width: `${progress}%` }"></div>
        </div>
        <p class="progress-text">{{ currentQuestionIndex + 1 }} / {{ questions.length }}</p>
      </div>
    </div>

    <div class="test-content">
      <!-- 测试介绍 -->
      <div v-if="!testStarted && !testCompleted" class="test-intro">
        <div class="intro-card">
          <h2>什么是MBTI?</h2>
          <p>MBTI（迈尔斯-布里格斯类型指标）是一种人格测验，基于卡尔·荣格的理论，将人格分为16种类型。通过回答一系列问题，可以确定你的主导偏好：</p>
          
          <div class="mbti-dimensions">
            <div class="dimension">
              <strong>外向(E) vs 内向(I)</strong>
              <p>你从何处获取能量？</p>
            </div>
            <div class="dimension">
              <strong>感觉(S) vs 直觉(N)</strong>
              <p>你如何获取信息？</p>
            </div>
            <div class="dimension">
              <strong>思考(T) vs 情感(F)</strong>
              <p>你如何做决策？</p>
            </div>
            <div class="dimension">
              <strong>判断(J) vs 感知(P)</strong>
              <p>你如何组织生活？</p>
            </div>
          </div>
          
          <p class="test-tips">提示：请根据真实的自己回答问题，而不是你希望成为的样子。</p>
          
          <button class="btn btn-primary start-btn" @click="startTest">开始测试</button>
        </div>
      </div>

      <!-- 测试题目 -->
      <div v-else-if="testStarted && !testCompleted" class="question-card">
        <h3>{{ questions[currentQuestionIndex].text }}</h3>
        
        <div class="options-container">
          <button 
            v-for="(option, index) in questions[currentQuestionIndex].options" 
            :key="index"
            class="option-btn"
            :class="{ selected: selectedAnswers[currentQuestionIndex] === index }"
            @click="selectAnswer(index)"
          >
            {{ option.text }}
          </button>
        </div>

        <div class="navigation-buttons">
          <button 
            class="btn btn-secondary"
            :disabled="currentQuestionIndex === 0"
            @click="prevQuestion"
          >
            上一题
          </button>
          <button 
            class="btn btn-primary"
            :disabled="selectedAnswers[currentQuestionIndex] === null"
            @click="nextQuestion"
          >
            {{ currentQuestionIndex === questions.length - 1 ? '完成测试' : '下一题' }}
          </button>
        </div>
      </div>

      <!-- 测试结果 -->
      <div v-else-if="testCompleted" class="result-card">
        <div class="result-header">
          <div class="result-badge" :class="resultType.toLowerCase()">
            <span class="result-type">{{ resultType }}</span>
          </div>
          <h2>你的MBTI人格类型</h2>
        </div>

        <div class="result-content">
          <div class="result-summary">
            <p>{{ resultSummary }}</p>
          </div>
          
          <div class="result-details">
            <h3>详细解析</h3>
            <div class="dimension-results">
              <div v-for="(dim, idx) in dimensionResults" :key="idx" class="dimension-result">
                <strong>{{ dim.title }}:</strong> {{ dim.result }}
                <div class="dimension-bar">
                  <div class="dimension-fill" :class="dim.preference" :style="{ width: dim.percentage + '%' }"></div>
                </div>
              </div>
            </div>
            
            <div class="strengths-weaknesses">
              <div class="strengths">
                <h4>优势</h4>
                <ul>
                  <li v-for="(strength, idx) in resultStrengths" :key="idx">{{ strength }}</li>
                </ul>
              </div>
              <div class="weaknesses">
                <h4>成长机会</h4>
                <ul>
                  <li v-for="(weakness, idx) in resultWeaknesses" :key="idx">{{ weakness }}</li>
                </ul>
              </div>
            </div>
            
            <div class="relationship-tips">
              <h3>情感关系建议</h3>
              <p>{{ relationshipAdvice }}</p>
            </div>
          </div>
        </div>
        
        <div class="result-actions">
          <router-link to="/" class="btn btn-secondary">返回首页</router-link>
          <button class="btn btn-primary" @click="restartTest">重新测试</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MBTITestView',
  data() {
    return {
      // 测试状态
      testStarted: false,
      testCompleted: false,
      currentQuestionIndex: 0,
      selectedAnswers: [],
      
      // 测试结果
      resultType: '',
      resultSummary: '',
      dimensionResults: [],
      resultStrengths: [],
      resultWeaknesses: [],
      relationshipAdvice: '',
      
      // MBTI类型描述
      mbtiTypes: {
        'INTJ': {
          summary: 'INTJ是具有战略思维的建筑师，富有洞察力，善于制定长期计划和解决复杂问题。',
          strengths: ['独立思考', '远见卓识', '逻辑分析能力强', '自主性高'],
          weaknesses: ['过度批判', '对情感需求反应迟钝', '完美主义倾向', '社交技能相对较弱'],
          relationship: 'INTJ在关系中重视深度连接和智力交流，需要理解伴侣的情感需求，学会表达情感。'
        },
        'INTP': {
          summary: 'INTP是充满好奇心的思考者，善于分析和创新，对理论和概念有浓厚兴趣。',
          strengths: ['创新思维', '客观分析', '适应能力强', '开放心态'],
          weaknesses: ['犹豫不决', '容易分心', '对实际应用不感兴趣', '情感表达笨拙'],
          relationship: 'INTP需要在关系中找到平衡点，既要保留个人空间，又要投入足够精力维护关系。'
        },
        'ENTJ': {
          summary: 'ENTJ是果断的领导者，具有卓越的组织能力和战略眼光，善于动员他人实现目标。',
          strengths: ['领导力强', '决策果断', '目标明确', '高效组织能力'],
          weaknesses: ['过于直接', '控制欲强', '缺乏耐心', '对他人感受不够敏感'],
          relationship: 'ENTJ在关系中需要学会倾听和妥协，尊重伴侣的意见，培养情感连接。'
        },
        'ENTP': {
          summary: 'ENTP是机智的辩论家，充满创意，善于挑战传统思维，喜欢探索新想法。',
          strengths: ['创造力强', '机智灵活', '善于沟通', '适应性强'],
          weaknesses: ['缺乏耐心', '容易冲动', '难以专注', '对常规感到无聊'],
          relationship: 'ENTP需要在关系中培养稳定性和承诺感，同时保持足够的自由空间。'
        },
        'INFJ': {
          summary: 'INFJ是富有洞察力的咨询师，敏感且理想主义，致力于帮助他人实现潜能。',
          strengths: ['同理心强', '洞察力深', '忠诚可靠', '价值观明确'],
          weaknesses: ['过度付出', '容易焦虑', '对批评敏感', '完美主义倾向'],
          relationship: 'INFJ在关系中需要平衡照顾他人和自我关怀，建立健康边界，学会表达需求。'
        },
        'INFP': {
          summary: 'INFP是理想主义的治疗师，价值观驱动，注重个人成长和意义寻找。',
          strengths: ['真诚善良', '创造力强', '适应能力好', '重视价值观'],
          weaknesses: ['犹豫不决', '容易受伤', '难以设定边界', '过度自我批评'],
          relationship: 'INFP需要在关系中找到真实的自我表达，同时学会面对冲突和实际问题。'
        },
        'ENFJ': {
          summary: 'ENFJ是热情的教导者，善于理解和激励他人，致力于帮助人们成长。',
          strengths: ['善于共情', '领导力强', '沟通能力佳', '组织协调能力'],
          weaknesses: ['过度关注他人需求', '对批评敏感', '难以拒绝', '理想主义可能导致失望'],
          relationship: 'ENFJ在关系中需要学会优先考虑自己的需求，设定健康边界，避免过度牺牲。'
        },
        'ENFP': {
          summary: 'ENFP是充满热情的追梦人， optimistic, creative, driven by curiosity.',
          strengths: ['热情活力', '创造力强', '善于沟通', '适应性好'],
          weaknesses: ['难以专注', '容易分散注意力', '冲动决策', '对常规感到束缚'],
          relationship: 'ENFP需要在关系中培养稳定性和承诺感，同时保持探索新事物的热情。'
        },
        'ISTJ': {
          summary: 'ISTJ是可靠的检查者，注重实际和传统，善于有条不紊地执行计划。',
          strengths: ['可靠务实', '责任感强', '注重细节', '有条理'],
          weaknesses: ['过于保守', '对变化抵触', '情感表达含蓄', '难以适应新情况'],
          relationship: 'ISTJ在关系中需要学会表达情感和欣赏，接受伴侣的不同意见，保持关系的新鲜感。'
        },
        'ISFJ': {
          summary: 'ISFJ是忠诚的保护者，富有同情心，重视传统和稳定，致力于照顾他人。',
          strengths: ['关爱体贴', '责任感强', '耐心细致', '注重实际'],
          weaknesses: ['过度牺牲', '难以拒绝他人', '对批评敏感', '不愿冒险'],
          relationship: 'ISFJ在关系中需要学会表达自己的需求和感受，避免过度付出，培养自我关怀。'
        },
        'ESTJ': {
          summary: 'ESTJ是务实的监督者，组织能力强，注重效率和传统，善于执行和管理。',
          strengths: ['领导力强', '实际可靠', '组织能力佳', '决断力强'],
          weaknesses: ['过于严格', '难以接受变化', '对情感表达不敏感', '控制欲强'],
          relationship: 'ESTJ在关系中需要学会放松控制，倾听伴侣意见，培养情感连接和灵活性。'
        },
        'ESFJ': {
          summary: 'ESFJ是热情的提供者，善于社交，重视和谐，致力于帮助和支持他人。',
          strengths: ['友善热情', '善于社交', '富有责任感', '注重实际'],
          weaknesses: ['过度关注他人需求', '难以设定边界', '对批评敏感', '不愿表达负面情绪'],
          relationship: 'ESFJ在关系中需要平衡照顾他人和自我关怀，学会直接表达需求，接受关系中的不完美。'
        },
        'ISTP': {
          summary: 'ISTP是冷静的工匠，善于解决实际问题，灵活适应，注重即时体验。',
          strengths: ['务实高效', '问题解决能力强', '冷静理性', '灵活适应'],
          weaknesses: ['情感表达含蓄', '对长期计划缺乏兴趣', '难以承诺', '社交互动有限'],
          relationship: 'ISTP在关系中需要学会表达情感，投入更多精力维护关系，建立深度连接。'
        },
        'ISFP': {
          summary: 'ISFP是敏感的艺术家，注重个人体验和和谐，善于欣赏和创造美。',
          strengths: ['真诚善良', '善于观察', '灵活适应', '富有艺术感'],
          weaknesses: ['避免冲突', '情感波动大', '难以做决定', '对批评敏感'],
          relationship: 'ISFP在关系中需要学会面对冲突，表达真实感受，建立健康的自我认同。'
        },
        'ESTP': {
          summary: 'ESTP是大胆的企业家，充满活力，善于抓住机会，喜欢挑战和冒险。',
          strengths: ['活力充沛', '实际务实', '适应能力强', '善于社交'],
          weaknesses: ['缺乏耐心', '冲动决策', '难以专注长期目标', '对情感需求忽视'],
          relationship: 'ESTP在关系中需要培养长期承诺感，学会倾听和理解伴侣的情感需求，建立稳定连接。'
        },
        'ESFP': {
          summary: 'ESFP是热情的表演者，善于社交，充满活力，喜欢创造快乐和享受当下。',
          strengths: ['友善热情', '善于社交', '富有同理心', '灵活适应'],
          weaknesses: ['难以专注长期计划', '对批评敏感', '避免冲突', '冲动决策'],
          relationship: 'ESFP在关系中需要学会面对实际问题，培养承诺感，同时保持活力和热情。'
        }
      },
      
      // 测试题目
      questions: [
        // E/I 维度问题 (12道)
        {
          dimension: 'EI',
          text: '在社交活动结束后，你通常会感到：',
          options: [
            { text: '精力充沛，想要继续社交', score: 'E' },
            { text: '有些兴奋，偶尔想与人分享感受', score: 'E1' },
            { text: '有些疲惫，但还能继续', score: 'M' },
            { text: '需要独处一段时间来恢复精力', score: 'I' }
          ]
        },
        {
          dimension: 'EI',
          text: '当你需要解决一个重要问题时，你更倾向于：',
          options: [
            { text: '与他人讨论，听取不同意见', score: 'E' },
            { text: '先寻求他人建议，再整理思路', score: 'E1' },
            { text: '先独自思考，再与他人讨论', score: 'M' },
            { text: '独自思考，权衡利弊', score: 'I' }
          ]
        },
        {
          dimension: 'EI',
          text: '在周末，你更享受：',
          options: [
            { text: '参加聚会或活动，与他人互动', score: 'E' },
            { text: '与朋友外出聚餐或短途旅行', score: 'E1' },
            { text: '半天社交，半天独处', score: 'M' },
            { text: '在家休息，进行个人爱好', score: 'I' }
          ]
        },
        {
          dimension: 'EI',
          text: '当你遇到有趣的想法时，你会：',
          options: [
            { text: '立即与他人分享', score: 'E' },
            { text: '选择特定的朋友分享', score: 'E1' },
            { text: '先记录下来，之后再分享', score: 'M' },
            { text: '先在脑海中整理清楚', score: 'I' }
          ]
        },
        {
          dimension: 'EI',
          text: '在团队工作中，你更喜欢：',
          options: [
            { text: '与团队成员密切合作', score: 'E' },
            { text: '频繁交流，共同解决问题', score: 'E1' },
            { text: '部分合作，部分独立', score: 'M' },
            { text: '独立完成分配的任务', score: 'I' }
          ]
        },
        {
          dimension: 'EI',
          text: '当你感到压力大时，你倾向于：',
          options: [
            { text: '与朋友聊天倾诉', score: 'E' },
            { text: '通过社交活动分散注意力', score: 'E1' },
            { text: '与一两个亲密朋友交流', score: 'M' },
            { text: '独自冷静思考', score: 'I' }
          ]
        },
        {
          dimension: 'EI',
          text: '在会议中，你通常：',
          options: [
            { text: '积极发言，分享观点', score: 'E' },
            { text: '主动参与讨论，表达想法', score: 'E1' },
            { text: '适时发言，表达看法', score: 'M' },
            { text: '认真倾听，谨慎表达', score: 'I' }
          ]
        },
        {
          dimension: 'EI',
          text: '你认为自己是一个怎样的人？',
          options: [
            { text: '外向开朗，善于社交', score: 'E' },
            { text: '比较活跃，喜欢与人交流', score: 'E1' },
            { text: '有时外向有时内向', score: 'M' },
            { text: '安静内敛，喜欢独处', score: 'I' }
          ]
        },
        {
          dimension: 'EI',
          text: '当需要认识新朋友时，你会：',
          options: [
            { text: '主动接近并开始交谈', score: 'E' },
            { text: '愿意主动，但需要适当的机会', score: 'E1' },
            { text: '在熟悉环境中主动', score: 'M' },
            { text: '等待对方先主动', score: 'I' }
          ]
        },
        {
          dimension: 'EI',
          text: '你更喜欢哪种类型的学习环境？',
          options: [
            { text: '课堂讨论，小组学习', score: 'E' },
            { text: '与同学合作完成项目', score: 'E1' },
            { text: '混合学习方式', score: 'M' },
            { text: '自学，独立完成作业', score: 'I' }
          ]
        },
        {
          dimension: 'EI',
          text: '在派对上，你通常会：',
          options: [
            { text: '四处走动，与多人交流', score: 'E' },
            { text: '与多个群体短暂交流', score: 'E1' },
            { text: '与小群体交流互动', score: 'M' },
            { text: '与少数几个熟悉的人深入交谈', score: 'I' }
          ]
        },
        {
          dimension: 'EI',
          text: '你如何获取新想法和灵感？',
          options: [
            { text: '通过与他人交流和讨论', score: 'E' },
            { text: '参加讲座和研讨会', score: 'E1' },
            { text: '结合交流和阅读', score: 'M' },
            { text: '通过阅读和自我反思', score: 'I' }
          ]
        },
        
        // S/N 维度问题 (12道)
        {
          dimension: 'SN',
          text: '当你学习新事物时，你更关注：',
          options: [
            { text: '具体事实和实际应用', score: 'S' },
            { text: '实际案例和实用技巧', score: 'S1' },
            { text: '事实和概念结合', score: 'M' },
            { text: '概念、模式和可能性', score: 'N' }
          ]
        },
        {
          dimension: 'SN',
          text: '在做决策时，你更依赖：',
          options: [
            { text: '直接经验和已有信息', score: 'S' },
            { text: '过去的成功经验', score: 'S1' },
            { text: '经验和直觉结合', score: 'M' },
            { text: '直觉和洞察力', score: 'N' }
          ]
        },
        {
          dimension: 'SN',
          text: '你更倾向于：',
          options: [
            { text: '关注当前的、具体的细节', score: 'S' },
            { text: '注重现在的实际情况', score: 'S1' },
            { text: '兼顾当前和未来', score: 'M' },
            { text: '思考未来的可能性和发展', score: 'N' }
          ]
        },
        {
          dimension: 'SN',
          text: '在阅读时，你更关注：',
          options: [
            { text: '具体内容和事实', score: 'S' },
            { text: '明确陈述的信息', score: 'S1' },
            { text: '内容和意义并重', score: 'M' },
            { text: '隐含的意义和联系', score: 'N' }
          ]
        },
        {
          dimension: 'SN',
          text: '当描述一个事件时，你通常会：',
          options: [
            { text: '详细说明具体细节', score: 'S' },
            { text: '描述事实经过', score: 'S1' },
            { text: '既讲细节也讲整体', score: 'M' },
            { text: '强调整体印象和感受', score: 'N' }
          ]
        },
        {
          dimension: 'SN',
          text: '在解决问题时，你倾向于：',
          options: [
            { text: '按照既定步骤逐步解决', score: 'S' },
            { text: '参考已有方案解决', score: 'S1' },
            { text: '有步骤但灵活调整', score: 'M' },
            { text: '寻找创新方法和捷径', score: 'N' }
          ]
        },
        { // 修复重复闭合括号的问题
          dimension: 'SN',
          text: '你对什么更感兴趣？',
          options: [
            { text: '实际发生的事情', score: 'S' },
            { text: '具体的现实情况', score: 'S1' },
            { text: '当前和可能发生的事情', score: 'M' },
            { text: '可能发生的事情', score: 'N' }
          ]
        },
        {
          dimension: 'SN',
          text: '在工作中，你更喜欢：',
          options: [
            { text: '明确的任务和具体的指导', score: 'S' },
            { text: '具体明确的工作内容', score: 'S1' },
            { text: '有框架但有自由度', score: 'M' },
            { text: '灵活的目标和创新的空间', score: 'N' }
          ]
        },
        {
          dimension: 'SN',
          text: '当学习新技能时，你更倾向于：',
          options: [
            { text: '通过实际操作和练习', score: 'S' },
            { text: '跟随步骤逐步学习', score: 'S1' },
            { text: '理论结合实践', score: 'M' },
            { text: '通过理解原理和概念', score: 'N' }
          ]
        },
        {
          dimension: 'SN',
          text: '你如何查看过去的经验？',
          options: [
            { text: '是宝贵的参考依据', score: 'S' },
            { text: '是可靠的指导原则', score: 'S1' },
            { text: '有参考价值但需要创新', score: 'M' },
            { text: '是需要超越的局限', score: 'N' }
          ]
        },
        {
          dimension: 'SN',
          text: '在旅行时，你更注重：',
          options: [
            { text: '参观具体景点和品尝当地美食', score: 'S' },
            { text: '游览知名地标和景点', score: 'S1' },
            { text: '平衡观光和文化体验', score: 'M' },
            { text: '体验当地文化和风土人情', score: 'N' }
          ]
        },
        {
          dimension: 'SN',
          text: '你更擅长记住：',
          options: [
            { text: '具体事实和数据', score: 'S' },
            { text: '具体事件和细节', score: 'S1' },
            { text: '事实和概念都能记住', score: 'M' },
            { text: '概念框架和抽象关系', score: 'N' }
          ]
        },
        
        // T/F 维度问题 (12道)
        {
          dimension: 'TF',
          text: '在做决策时，你更注重：',
          options: [
            { text: '客观事实和逻辑分析', score: 'T' },
            { text: '数据和证据支持', score: 'T1' },
            { text: '兼顾事实和情感因素', score: 'M' },
            { text: '他人感受和和谐关系', score: 'F' }
          ]
        },
        {
          dimension: 'TF',
          text: '当朋友遇到问题时，你通常会：',
          options: [
            { text: '提供分析和解决方案', score: 'T' },
            { text: '给出理性建议', score: 'T1' },
            { text: '先共情再提供建议', score: 'M' },
            { text: '给予情感支持和理解', score: 'F' }
          ]
        },
        {
          dimension: 'TF',
          text: '在讨论中，你更关注：',
          options: [
            { text: '观点的逻辑性和一致性', score: 'T' },
            { text: '论据的合理性', score: 'T1' },
            { text: '既能保持逻辑又能兼顾情感', score: 'M' },
            { text: '和谐的交流氛围', score: 'F' }
          ]
        },
        {
          dimension: 'TF',
          text: '当需要评价他人工作时，你倾向于：',
          options: [
            { text: '客观指出优缺点', score: 'T' },
            { text: '基于事实给出反馈', score: 'T1' },
            { text: '平衡批评和鼓励', score: 'M' },
            { text: '强调积极方面，委婉提出改进', score: 'F' }
          ]
        },
        {
          dimension: 'TF',
          text: '你认为自己更倾向于是：',
          options: [
            { text: '理性思考者', score: 'T' },
            { text: '注重分析的人', score: 'T1' },
            { text: '理性与感性平衡的人', score: 'M' },
            { text: '情感丰富的人', score: 'F' }
          ]
        },
        {
          dimension: 'TF',
          text: '在制定规则或制度时，你更关注：',
          options: [
            { text: '公平性和一致性', score: 'T' },
            { text: '逻辑严密的结构', score: 'T1' },
            { text: '平衡原则和灵活性', score: 'M' },
            { text: '对人的影响和感受', score: 'F' }
          ]
        },
        {
          dimension: 'TF',
          text: '当面临冲突时，你通常会：',
          options: [
            { text: '理性分析问题根源', score: 'T' },
            { text: '寻找解决方案', score: 'T1' },
            { text: '兼顾问题解决和情感安抚', score: 'M' },
            { text: '优先修复关系', score: 'F' }
          ]
        },
        {
          dimension: 'TF',
          text: '你更欣赏哪种工作环境？',
          options: [
            { text: '注重效率和结果导向', score: 'T' },
            { text: '理性专业的氛围', score: 'T1' },
            { text: '既有效率又重视团队氛围', score: 'M' },
            { text: '和谐合作的团队氛围', score: 'F' }
          ]
        },
        {
          dimension: 'TF',
          text: '在评价自己的行为时，你更倾向于问自己：',
          options: [
            { text: '这样做是否合理', score: 'T' },
            { text: '这样做是否符合逻辑', score: 'T1' },
            { text: '这样做是否既合理又符合价值观', score: 'M' },
            { text: '这样做是否让我感到满足', score: 'F' }
          ]
        },
        {
          dimension: 'TF',
          text: '你认为成功最重要的因素是：',
          options: [
            { text: '能力和策略', score: 'T' },
            { text: '分析和规划', score: 'T1' },
            { text: '能力和人际关系并重', score: 'M' },
            { text: '人际关系和团队合作', score: 'F' }
          ]
        },
        {
          dimension: 'TF',
          text: '在给他人提建议时，你通常会：',
          options: [
            { text: '直接指出问题和解决方案', score: 'T' },
            { text: '提供清晰的逻辑分析', score: 'T1' },
            { text: '既提供建议又考虑对方感受', score: 'M' },
            { text: '考虑对方感受后再提出建议', score: 'F' }
          ]
        },
        {
          dimension: 'TF',
          text: '你如何查看规则？',
          options: [
            { text: '应该严格遵守，确保公平', score: 'T' },
            { text: '规则是必要的指导原则', score: 'T1' },
            { text: '规则需要但可以灵活应用', score: 'M' },
            { text: '规则应以人为本，考虑具体情况', score: 'F' }
          ]
        },
          
          // J/P 维度问题 (12道)
          {
          dimension: 'JP',
          text: '你通常如何规划你的一天？',
          options: [
            { text: '制定详细计划并尽量遵守', score: 'J' },
            { text: '制定大致计划，保持一定灵活性', score: 'M' },
            { text: '保持灵活，根据情况调整', score: 'P' },
            { text: '完全随性，不做规划', score: 'P1' }
          ]
        },
        {
          dimension: 'JP',
          text: '面对最后期限，你倾向于：',
          options: [
            { text: '提前完成，避免压力', score: 'J' },
            { text: '提前开始，有序完成', score: 'M' },
            { text: '在截止日期前完成，享受压力下的效率', score: 'P' },
            { text: '临近截止日时高效完成', score: 'P1' }
          ]
        },
        {
          dimension: 'JP',
          text: '在工作环境中，你更喜欢：',
          options: [
            { text: '明确的结构和清晰的期望', score: 'J' },
            { text: '基本框架下的自由发挥', score: 'M' },
            { text: '灵活的方式和开放的可能性', score: 'P' },
            { text: '完全自由的工作方式', score: 'P1' }
          ]
        },
        {
          dimension: 'JP',
          text: '当计划被打乱时，你会感到：',
          options: [
            { text: '有些焦虑，希望尽快回到正轨', score: 'J' },
            { text: '有点失望但能够适应', score: 'M' },
            { text: '灵活调整，享受变化带来的可能性', score: 'P' },
            { text: '兴奋，视为新的机会', score: 'P1' }
          ]
        },
        {
          dimension: 'JP',
          text: '你更喜欢的工作方式是：',
          options: [
            { text: '一次性完成任务，再开始新任务', score: 'J' },
            { text: '有序地处理少量任务', score: 'M' },
            { text: '同时处理多个任务，灵活切换', score: 'P' },
            { text: '根据兴趣随时切换任务', score: 'P1' }
          ]
        },
        {
          dimension: 'JP',
          text: '在日常生活中，你倾向于：',
          options: [
            { text: '保持整洁有序', score: 'J' },
            { text: '基本整洁但不过于严格', score: 'M' },
            { text: '保持舒适随性', score: 'P' },
            { text: '生活环境比较随意', score: 'P1' }
          ]
        },
        {
          dimension: 'JP',
          text: '当面临多种选择时，你会：',
          options: [
            { text: '尽快做出决定', score: 'J' },
            { text: '收集必要信息后做决定', score: 'M' },
            { text: '尽量收集更多信息后再决定', score: 'P' },
            { text: '避免过早决定，保持开放选择', score: 'P1' }
          ]
        },
        {
          dimension: 'JP',
          text: '你如何查看生活中的意外事件？',
          options: [
            { text: '尽量避免', score: 'J' },
            { text: '有准备地应对', score: 'M' },
            { text: '视为新的机会', score: 'P' },
            { text: '欢迎变化带来的刺激', score: 'P1' }
          ]
        },
        {
          dimension: 'JP',
          text: '在团队项目中，你更倾向于：',
          options: [
            { text: '制定详细计划和时间表', score: 'J' },
            { text: '制定大致框架和关键节点', score: 'M' },
            { text: '灵活应对，边做边调整', score: 'P' },
            { text: '不设框架，即兴发挥', score: 'P1' }
          ]
        },
        {
          dimension: 'JP',
          text: '你更喜欢的休闲方式是：',
          options: [
            { text: '有计划的活动', score: 'J' },
            { text: '有初步想法但保持灵活', score: 'M' },
            { text: '即兴的放松', score: 'P' },
            { text: '完全随机的休闲方式', score: 'P1' }
          ]
        },
        {
          dimension: 'JP',
          text: '当任务完成后，你通常会：',
          options: [
            { text: '总结经验教训，归档相关资料', score: 'J' },
            { text: '简单总结后转向下一项', score: 'M' },
            { text: '放下任务，转向新的事情', score: 'P' },
            { text: '完全放下，不做任何总结', score: 'P1' }
          ]
        },
        {
          dimension: 'JP',
          text: '你如何查看时间管理？',
          options: [
            { text: '精确规划时间很重要', score: 'J' },
            { text: '合理规划但保持弹性', score: 'M' },
            { text: '保持弹性比严格计划更重要', score: 'P' },
            { text: '不需要规划时间，随遇而安', score: 'P1' }
          ]
        }
      ]
    }
  },
  computed: {
    // 计算测试进度百分比
    progress() {
      if (!this.testStarted) return 0
      return ((this.currentQuestionIndex + 1) / this.questions.length) * 100
    }
  },
  created() {
    // 初始化答案数组
    this.selectedAnswers = Array(this.questions.length).fill(null)
  },
  methods: {
    // 开始测试
    startTest() {
      this.testStarted = true
      this.currentQuestionIndex = 0
      this.selectedAnswers = Array(this.questions.length).fill(null)
    },
    
    // 选择答案
    selectAnswer(index) {
      this.selectedAnswers[this.currentQuestionIndex] = index
    },
    
    // 上一题
    prevQuestion() {
      if (this.currentQuestionIndex > 0) {
        this.currentQuestionIndex--
      }
    },
    
    // 下一题或完成测试
    nextQuestion() {
      if (this.currentQuestionIndex < this.questions.length - 1) {
        this.currentQuestionIndex++
      } else {
        // 完成测试，计算结果
        this.calculateResult()
        this.testCompleted = true
        this.testStarted = false
      }
    },
    
    // 计算测试结果
    calculateResult() {
      // 统计各维度得分
      const scores = {
        'E': 0, 'I': 0,
        'S': 0, 'N': 0,
        'T': 0, 'F': 0,
        'J': 0, 'P': 0
      }
      
      // 统计每个维度的选项数量
      const dimensionCounts = {
        'EI': { 'E': 0, 'I': 0, 'M': 0, total: 0 },
        'SN': { 'S': 0, 'N': 0, 'M': 0, total: 0 },
        'TF': { 'T': 0, 'F': 0, 'M': 0, total: 0 },
        'JP': { 'J': 0, 'P': 0, 'M': 0, total: 0 }
      }
      
      // 计算得分
       this.selectedAnswers.forEach((answerIndex, questionIndex) => {
         if (answerIndex !== null) {
           const question = this.questions[questionIndex]
           const selectedOption = question.options[answerIndex]
           const dimension = question.dimension
           const score = selectedOption.score
           
           // 处理带有数字后缀的分数，如P1、E1等
           const baseScore = score.replace(/\d+$/, '')
           scores[baseScore]++
           
           // 确保dimensionCounts中存在该分数类别
           if (!dimensionCounts[dimension][score]) {
             dimensionCounts[dimension][score] = 0
           }
           dimensionCounts[dimension][score]++
           dimensionCounts[dimension].total++
         }
       })
      
      // 确定MBTI类型
      let mbtiType = ''
      
      // 计算E/I维度时考虑中间选项
      if (scores['E'] + scores['M']/2 > scores['I'] + scores['M']/2) {
        mbtiType += 'E'
      } else {
        mbtiType += 'I'
      }
      
      // 计算S/N维度时考虑中间选项
      if (scores['S'] + scores['M']/2 > scores['N'] + scores['M']/2) {
        mbtiType += 'S'
      } else {
        mbtiType += 'N'
      }
      
      // 计算T/F维度时考虑中间选项
      if (scores['T'] + scores['M']/2 > scores['F'] + scores['M']/2) {
        mbtiType += 'T'
      } else {
        mbtiType += 'F'
      }
      
      // 计算J/P维度时考虑中间选项
      if (scores['J'] + scores['M']/2 > scores['P'] + scores['M']/2) {
        mbtiType += 'J'
      } else {
        mbtiType += 'P'
      }
      
      // 设置结果信息
      this.resultType = mbtiType
      
      // 获取类型描述
      const typeData = this.mbtiTypes[mbtiType]
      this.resultSummary = typeData.summary
      this.resultStrengths = typeData.strengths
      this.resultWeaknesses = typeData.weaknesses
      this.relationshipAdvice = typeData.relationship
      
      // 计算各维度的百分比结果
      this.dimensionResults = [
        {
          title: '能量来源',
          result: scores['E'] + scores['M']/2 > scores['I'] + scores['M']/2 ? `外向 (E) ${dimensionCounts['EI']['E']}/${dimensionCounts['EI'].total}` : `内向 (I) ${dimensionCounts['EI']['I']}/${dimensionCounts['EI'].total}`,
          preference: scores['E'] + scores['M']/2 > scores['I'] + scores['M']/2 ? 'extrovert' : 'introvert',
          percentage: (dimensionCounts['EI'].total > 0 ? (Math.max(scores['E'] + scores['M']/2, scores['I'] + scores['M']/2) / (dimensionCounts['EI'].total)) * 100 : 50)
        },
        {
          title: '信息获取',
          result: scores['S'] + scores['M']/2 > scores['N'] + scores['M']/2 ? `感觉 (S) ${dimensionCounts['SN']['S']}/${dimensionCounts['SN'].total}` : `直觉 (N) ${dimensionCounts['SN']['N']}/${dimensionCounts['SN'].total}`,
          preference: scores['S'] + scores['M']/2 > scores['N'] + scores['M']/2 ? 'sensing' : 'intuition',
          percentage: (dimensionCounts['SN'].total > 0 ? (Math.max(scores['S'] + scores['M']/2, scores['N'] + scores['M']/2) / (dimensionCounts['SN'].total)) * 100 : 50)
        },
        {
          title: '决策方式',
          result: scores['T'] + scores['M']/2 > scores['F'] + scores['M']/2 ? `思考 (T) ${dimensionCounts['TF']['T']}/${dimensionCounts['TF'].total}` : `情感 (F) ${dimensionCounts['TF']['F']}/${dimensionCounts['TF'].total}`,
          preference: scores['T'] + scores['M']/2 > scores['F'] + scores['M']/2 ? 'thinking' : 'feeling',
          percentage: (dimensionCounts['TF'].total > 0 ? (Math.max(scores['T'] + scores['M']/2, scores['F'] + scores['M']/2) / (dimensionCounts['TF'].total)) * 100 : 50)
        },
        {
          title: '生活方式',
          result: scores['J'] + scores['M']/2 > scores['P'] + scores['M']/2 ? `判断 (J) ${dimensionCounts['JP']['J']}/${dimensionCounts['JP'].total}` : `感知 (P) ${dimensionCounts['JP']['P']}/${dimensionCounts['JP'].total}`,
          preference: scores['J'] + scores['M']/2 > scores['P'] + scores['M']/2 ? 'judging' : 'perceiving',
          percentage: (dimensionCounts['JP'].total > 0 ? (Math.max(scores['J'] + scores['M']/2, scores['P'] + scores['M']/2) / (dimensionCounts['JP'].total)) * 100 : 50)
        }
      ]
    },
    
    // 重新测试
    restartTest() {
      this.testCompleted = false
      this.startTest()
    }
  }
}
</script>

<style scoped>
.mbti-test-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.test-header {
  margin-bottom: 2rem;
}

.test-header h1 {
  font-size: 2.5rem;
  color: #ff9a9e;
  margin-bottom: 0.5rem;
}

.test-description {
  font-size: 1.2rem;
  color: #666;
  margin-bottom: 2rem;
}

.test-progress {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background-color: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.progress-fill {
  height: 100%;
  background-color: #ff9a9e;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 0.9rem;
  color: #666;
  margin: 0;
}

/* 测试介绍样式 */
.test-intro {
  max-width: 800px;
  margin: 0 auto;
}

.intro-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  text-align: left;
}

.intro-card h2 {
  color: #ff9a9e;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.mbti-dimensions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.dimension {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.test-tips {
  background-color: #fff9f8;
  border-left: 4px solid #ff9a9e;
  padding: 1rem;
  margin: 1.5rem 0;
  font-style: italic;
}

.start-btn {
  margin-top: 1rem;
}

/* 问题卡片样式 */
.question-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
}

.question-card h3 {
  font-size: 1.5rem;
  color: #333;
  margin-top: 0;
  margin-bottom: 2rem;
}

.options-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.option-btn {
  padding: 1rem 1.5rem;
  text-align: left;
  background-color: #f9f9f9;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.option-btn:hover {
  background-color: #f0f0f0;
  border-color: #ff9a9e;
}

.option-btn.selected {
  background-color: #fff0f0;
  border-color: #ff9a9e;
  color: #ff5a5f;
  font-weight: 500;
}

.navigation-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
}

/* 结果卡片样式 */
.result-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  max-width: 800px;
  margin: 0 auto;
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.result-header {
  text-align: center;
  margin-bottom: 2rem;
}

.result-badge {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  font-size: 1.5rem;
  font-weight: bold;
  border-radius: 30px;
  margin-bottom: 1rem;
  color: #fff;
}

/* 每种MBTI类型的颜色 */
.result-badge.intj { background-color: #3b5998; }
.result-badge.intp { background-color: #4c6ef5; }
.result-badge.entj { background-color: #fa5252; }
.result-badge.entp { background-color: #e64980; }
.result-badge.infj { background-color: #748ffc; }
.result-badge.infp { background-color: #a78bfa; }
.result-badge.enfj { background-color: #fd7e14; }
.result-badge.enfp { background-color: #fab005; }
.result-badge.istj { background-color: #20c997; }
.result-badge.isfj { background-color: #38d9a9; }
.result-badge.estj { background-color: #17a2b8; }
.result-badge.esfj { background-color: #40c057; }
.result-badge.istp { background-color: #6c757d; }
.result-badge.isfp { background-color: #868e96; }
.result-badge.estp { background-color: #dee2e6; color: #333; }
.result-badge.esfp { background-color: #e9ecef; color: #333; }

.result-header h2 {
  margin: 0;
  color: #333;
}

.result-content {
  text-align: left;
}

.result-summary {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 2rem;
  color: #444;
}

.result-details h3 {
  color: #ff9a9e;
  margin-top: 0;
  margin-bottom: 1rem;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 0.5rem;
}

.dimension-results {
  margin-bottom: 2rem;
}

.dimension-result {
  margin-bottom: 1.5rem;
}

.dimension-bar {
  width: 100%;
  height: 8px;
  background-color: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 0.5rem;
}

.dimension-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

/* 各维度颜色 */
.dimension-fill.extrovert { background-color: #ff9a9e; }
.dimension-fill.introvert { background-color: #7e9eff; }
.dimension-fill.sensing { background-color: #ffa8a8; }
.dimension-fill.intuition { background-color: #82c91e; }
.dimension-fill.thinking { background-color: #228be6; }
.dimension-fill.feeling { background-color: #f783ac; }
.dimension-fill.judging { background-color: #fd7e14; }
.dimension-fill.perceiving { background-color: #6f42c1; }

.strengths-weaknesses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.strengths h4,
.weaknesses h4 {
  margin-top: 0;
  color: #555;
}

.strengths ul,
.weaknesses ul {
  padding-left: 1.5rem;
  margin-top: 0.5rem;
}

.strengths li,
.weaknesses li {
  margin-bottom: 0.5rem;
}

.relationship-tips {
  background-color: #fff9f8;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 2rem 0;
}

.relationship-tips h3 {
  color: #ff9a9e;
  margin-top: 0;
  border-bottom: none;
}

.result-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

/* 按钮样式 */
.btn {
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.btn-primary {
  background-color: #ff9a9e;
  color: white;
}

.btn-primary:hover {
  background-color: #ff7a7e;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(255, 154, 158, 0.3);
}

.btn-primary:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  background-color: #e0e0e0;
  color: #333;
}

.btn-secondary:hover {
  background-color: #d0d0d0;
}

.btn-secondary:disabled {
  background-color: #f0f0f0;
  color: #999;
  cursor: not-allowed;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .mbti-dimensions {
    grid-template-columns: 1fr;
  }
  
  .strengths-weaknesses {
    grid-template-columns: 1fr;
  }
  
  .navigation-buttons {
    flex-direction: column;
    gap: 1rem;
  }
  
  .result-actions {
    flex-direction: column;
  }
  
  .question-card,
  .result-card,
  .intro-card {
    padding: 1.5rem;
  }
  
  .test-header h1 {
    font-size: 2rem;
  }
}
</style>